<template>
  <div class="nav">
    <div class="inner clearfix">
      <div class="leftbox">
        <ul>
          <li v-for="item in items">{{item.text}}</li>
        </ul>
      </div>
      <div class="gouwuche">
        <div class="logo">购物车</div>
        <div class="addcart"></div>
        <span class="cartnum">{{cartNum}}</span>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  .nav
    height: 90px
    position: relative
    width: 100%
    .inner
      margin: 0 auto
      width: 1220px
      .leftbox
        float: left
        padding-top: 37px
        li
          float: left
          padding-left: 42px
          line-height: 16px
          font-size: 14px
          &:first-child
            padding-left: 9px
          &:hover
            color: rgb(118,156,234)
            cursor: pointer;
  .gouwuche
    float: right
    padding-top: 37px
    width: 104px
    height: 40px
    .logo
      float: left
      background: url(cart.png) no-repeat
      text-indent 31px
      line-height 20px
      font-size 14px
     .cartnum
      margin-left: 5px
      display: inline-block
      line-height: 18px
      height: 18px
      width: 18px
      background-color: rgba(6,6,6,0.4)
      text-indent 5px
      border-radius: 10px
      color: white
      font-size: 12px
  .clearfix: :after
    content: " ";
    display: block;
    clear: both;
    height: 0;

</style>
<script>
  export default {
    data () {
      return {
        items: [
          {text: '精选'},
          {text: '手机'},
          {text: '耳机/音箱'},
          {text: '背壳/保护套'},
          {text: '“情怀背边”'},
          {text: '其他周边'},
          {text: '保修服务'},
          {text: '全部商品'}
        ],
        cartNum: 0
      }
    }
  }
</script>
